<template>
	<view class="content">
		<image class="backimg" :src="details.url" mode=""></image>
		<view class="wrapper">
			<view class="titlebox">
				<text>{{details.title}}</text>
			</view>
			<view class="centerbox">
				<image src="../../static/icons/datetime.png" mode=""></image>
				<text>{{details.datetime}}</text>
			</view>
			<view class="centerbox" style="justify-content: space-between;">
				<view class="left">
					<image src="../../static/icons/address.png" mode=""></image>
					<text>{{details.address}}</text>
				</view>
				<text style="color: #FF872E;">地图导航</text>
			</view>
			<view class="centerbox">
				<image src="../../static/icons/people.png" mode=""></image>
				<text>{{details.people}}</text>
			</view>
		</view>
		<view class="detailsbox">
			<text style="font-size: 16px; font-weight: bold; color: black;">活动详情</text>
			<text v-for="(item, index) in details.details" :key="index">{{item}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const details = ref({
		id: null,
		title: '上海市第四届群明星运动会-天马运动赞助上海市第四届群明星运动会-天马运动赞助',
		datetime: '2025年3月15日 14:00-16:00',
		address: '上海市青阳区124号红十字会3楼会议室',
		people: '已报名31人/不限制名额',
		details: ['1，这里是活动详情内容这里是活动详情内容，这里是活动详情内容，这里是活动详情内容。',
			' 2，这里是活动详情内容这里是活动详情内容，这里是活动详情内容，这里是活动详情内容。 ',
			'3，这里是活动详情内容这里是活动详情内容，这里是活动详情内容，这里是活动详情内容。'
		],
		url: 'https://i1.mifile.cn/f/i/2019/about/index_03.jpg?new'
	})
	onLoad((options) => {
		details.value.id = options.id
	})
</script>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}

	.backimg {
		width: 100%;
		height: 200px;
	}

	.wrapper {
		width: 85%;
		border-radius: 15px;
		background-color: white;
		padding: 10px;
		margin-top: -30px;

		.titlebox {
			font-size: 16px;
			font-weight: bold;
			padding-bottom: 10px;
			border-bottom: #f0f0f0 solid 1px;
		}

		.centerbox {
			margin: 10px 0;
			display: flex;
			gap: 5px;
			align-items: center;
			font-size: 14px;
			color: gray;

			.left {
				display: flex;
				gap: 10px;
				align-items: center;
			}

			image {
				width: 20px;
				height: 20px;
			}
		}
	}

	.detailsbox {
		margin-top: 20px;
		width: 85%;
		border-radius: 15px;
		background-color: white;
		padding: 10px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		flex: 1;

		text {
			font-size: 14px;
			color: gray;
		}
	}
</style>